<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">
		<!--自动刷新，1s=1-->
		<!--<META http-equiv="Refresh" content="3">-->
		<!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
		<meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
		<!--禁止缓存-测试时用-->
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<!--禁止缓存-测试时用-->
		<!--禁止禁止识别电话号码和邮件-->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!--禁止禁止识别电话号码和邮件-->
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<meta name="x5-orientation" content="portrait" />
		<meta name="x5-fullscreen" content="true" />
		<!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="screen-orientation" content="portrait">
		<meta name="full-screen" content="yes">
		<!--UC浏览器竖屏显示和全屏显示-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>粘性加载动画</title>
		<style type="text/css">
			html, body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			body {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				background: #030303;
			}
			svg {
				display: none;
			}
			.blobs {
				-webkit-filter: url(#goo);
				filter: url(#goo);
				width: 300px;
				height: 300px;
				position: relative;
				overflow: hidden;
				border-radius: 70px;
			}
			.blobs .blob-center {
				position: absolute;
				background: #FFF200;
				top: 50%;
				left: 50%;
				width: 30px;
				height: 30px;
				-webkit-transform-origin: left top;
				transform-origin: left top;
				-webkit-transform: scale(0.9) translate(-50%, -50%);
				transform: scale(0.9) translate(-50%, -50%);
				-webkit-animation: blob-grow linear 3.4s infinite;
				animation: blob-grow linear 3.4s infinite;
				border-radius: 50%;
				box-shadow: 0 -10px 40px -5px #FFF200;
			}
			.blob {
				position: absolute;
				background: #FFF200;
				top: 50%;
				left: 50%;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				-webkit-animation: blobs ease-out 3.4s infinite;
				animation: blobs ease-out 3.4s infinite;
				-webkit-transform: scale(0.9) translate(-50%, -50%);
				transform: scale(0.9) translate(-50%, -50%);
				-webkit-transform-origin: center top;
				transform-origin: center top;
				opacity: 0;
			}
			.blob:nth-child(1) {
				-webkit-animation-delay: 0.2s;
				animation-delay: 0.2s;
			}
			.blob:nth-child(2) {
				-webkit-animation-delay: 0.4s;
				animation-delay: 0.4s;
			}
			.blob:nth-child(3) {
				-webkit-animation-delay: 0.6s;
				animation-delay: 0.6s;
			}
			.blob:nth-child(4) {
				-webkit-animation-delay: 0.8s;
				animation-delay: 0.8s;
			}
			.blob:nth-child(5) {
				-webkit-animation-delay: 1s;
				animation-delay: 1s;
			}
			@-webkit-keyframes blobs {
				0% {
					opacity: 0;
					-webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
					transform: scale(0) translate(calc(-330px - 50%), -50%);
				}
				1% {
					opacity: 1;
				}
				35%, 65% {
					opacity: 1;
					-webkit-transform: scale(0.9) translate(-50%, -50%);
					transform: scale(0.9) translate(-50%, -50%);
				}
				99% {
					opacity: 1;
				}
				100% {
					opacity: 0;
					-webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
					transform: scale(0) translate(calc(330px - 50%), -50%);
				}
			}
			@keyframes blobs {
				0% {
					opacity: 0;
					-webkit-transform: scale(0) translate(calc(-330px - 50%), -50%);
					transform: scale(0) translate(calc(-330px - 50%), -50%);
				}
				1% {
					opacity: 1;
				}
				35%, 65% {
					opacity: 1;
					-webkit-transform: scale(0.9) translate(-50%, -50%);
					transform: scale(0.9) translate(-50%, -50%);
				}
				99% {
					opacity: 1;
				}
				100% {
					opacity: 0;
					-webkit-transform: scale(0) translate(calc(330px - 50%), -50%);
					transform: scale(0) translate(calc(330px - 50%), -50%);
				}
			}
			@-webkit-keyframes blob-grow {
				0%, 39% {
					-webkit-transform: scale(0) translate(-50%, -50%);
					transform: scale(0) translate(-50%, -50%);
				}
				40%, 42% {
					-webkit-transform: scale(1, 0.9) translate(-50%, -50%);
					transform: scale(1, 0.9) translate(-50%, -50%);
				}
				43%, 44% {
					-webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
					transform: scale(1.2, 1.1) translate(-50%, -50%);
				}
				45%, 46% {
					-webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
					transform: scale(1.3, 1.2) translate(-50%, -50%);
				}
				47%, 48% {
					-webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
					transform: scale(1.4, 1.3) translate(-50%, -50%);
				}
				52% {
					-webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
					transform: scale(1.5, 1.4) translate(-50%, -50%);
				}
				54% {
					-webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
					transform: scale(1.7, 1.6) translate(-50%, -50%);
				}
				58% {
					-webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
					transform: scale(1.8, 1.7) translate(-50%, -50%);
				}
				68%, 70% {
					-webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
					transform: scale(1.7, 1.5) translate(-50%, -50%);
				}
				78% {
					-webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
					transform: scale(1.6, 1.4) translate(-50%, -50%);
				}
				80%, 81% {
					-webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
					transform: scale(1.5, 1.4) translate(-50%, -50%);
				}
				82%, 83% {
					-webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
					transform: scale(1.4, 1.3) translate(-50%, -50%);
				}
				84%, 85% {
					-webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
					transform: scale(1.3, 1.2) translate(-50%, -50%);
				}
				86%, 87% {
					-webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
					transform: scale(1.2, 1.1) translate(-50%, -50%);
				}
				90%, 91% {
					-webkit-transform: scale(1, 0.9) translate(-50%, -50%);
					transform: scale(1, 0.9) translate(-50%, -50%);
				}
				92%, 100% {
					-webkit-transform: scale(0) translate(-50%, -50%);
					transform: scale(0) translate(-50%, -50%);
				}
			}
			@keyframes blob-grow {
				0%, 39% {
					-webkit-transform: scale(0) translate(-50%, -50%);
					transform: scale(0) translate(-50%, -50%);
				}
				40%, 42% {
					-webkit-transform: scale(1, 0.9) translate(-50%, -50%);
					transform: scale(1, 0.9) translate(-50%, -50%);
				}
				43%, 44% {
					-webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
					transform: scale(1.2, 1.1) translate(-50%, -50%);
				}
				45%, 46% {
					-webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
					transform: scale(1.3, 1.2) translate(-50%, -50%);
				}
				47%, 48% {
					-webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
					transform: scale(1.4, 1.3) translate(-50%, -50%);
				}
				52% {
					-webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
					transform: scale(1.5, 1.4) translate(-50%, -50%);
				}
				54% {
					-webkit-transform: scale(1.7, 1.6) translate(-50%, -50%);
					transform: scale(1.7, 1.6) translate(-50%, -50%);
				}
				58% {
					-webkit-transform: scale(1.8, 1.7) translate(-50%, -50%);
					transform: scale(1.8, 1.7) translate(-50%, -50%);
				}
				68%, 70% {
					-webkit-transform: scale(1.7, 1.5) translate(-50%, -50%);
					transform: scale(1.7, 1.5) translate(-50%, -50%);
				}
				78% {
					-webkit-transform: scale(1.6, 1.4) translate(-50%, -50%);
					transform: scale(1.6, 1.4) translate(-50%, -50%);
				}
				80%, 81% {
					-webkit-transform: scale(1.5, 1.4) translate(-50%, -50%);
					transform: scale(1.5, 1.4) translate(-50%, -50%);
				}
				82%, 83% {
					-webkit-transform: scale(1.4, 1.3) translate(-50%, -50%);
					transform: scale(1.4, 1.3) translate(-50%, -50%);
				}
				84%, 85% {
					-webkit-transform: scale(1.3, 1.2) translate(-50%, -50%);
					transform: scale(1.3, 1.2) translate(-50%, -50%);
				}
				86%, 87% {
					-webkit-transform: scale(1.2, 1.1) translate(-50%, -50%);
					transform: scale(1.2, 1.1) translate(-50%, -50%);
				}
				90%, 91% {
					-webkit-transform: scale(1, 0.9) translate(-50%, -50%);
					transform: scale(1, 0.9) translate(-50%, -50%);
				}
				92%, 100% {
					-webkit-transform: scale(0) translate(-50%, -50%);
					transform: scale(0) translate(-50%, -50%);
				}
			}
		</style>
	</head>

	<body>
		<a href="http://www.big-culture.com/" target="_Blank">
			<!-- Loader -->
			<div class="blobs">
				<div class="blob-center"></div>
				<div class="blob"></div>
				<div class="blob"></div>
				<div class="blob"></div>
				<div class="blob"></div>
				<div class="blob"></div>
				<div class="blob"></div>
			</div>
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				<defs>
					<filter id="goo">
						<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
						<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
						<feBlend in="SourceGraphic" in2="goo" />
					</filter>
				</defs>
			</svg>
		</a>
	</body>

</html>